<template>
  <div class="navMenu">
    <el-menu
      :default-active.sync="default_active_prop"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <label :key="navMenu.m_id" v-for="navMenu in menuData">
        <el-submenu
          :key="navMenu.wm_code"
          :index="navMenu.wm_code"
          v-if="
            navMenu.sonWebSystemMenuViewList &&
            navMenu.sonWebSystemMenuViewList.length > 0
          "
        >
          <template slot="title">
            <span>{{ navMenu.wm_name }}</span>
          </template>
          <left-menu :menuData="navMenu.sonWebSystemMenuViewList"></left-menu>
        </el-submenu>
        <el-menu-item
          :key="navMenu.wm_code"
          :index="navMenu.wm_code"
          v-if="
            !navMenu.sonWebSystemMenuViewList ||
            navMenu.sonWebSystemMenuViewList.length == 0
          "
          :route="navMenu.wm_url"
        >
          <template slot="title">
            <span slot="title">{{ navMenu.wm_name }}</span>
          </template>
        </el-menu-item>
      </label>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "LeftMenu", //  LeftMenu  使用递归组件必须要有, 递归时使用  驼峰会转化为-分割 比如当前案例转化为 left-menu
  // props: ["menuData","default_active"], // 传入子组件的数据

  props: {
    menuData: [],
    default_active_prop: String,
  },
};
</script>
